<!DOCTYPE html>
<html>
<head>
    <title>Basic usage</title>
    <meta charset="utf-8">
    <link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.min.css" rel="stylesheet">
    <link href="../../styles/kendo.dataviz.min.css" rel="stylesheet">
    <link href="../../styles/kendo.dataviz.default.min.css" rel="stylesheet">
    <link href="../../styles/kendo.mobile.all.min.css" rel="stylesheet" />
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/kendo.all.min.js"></script>
    <script src="../content/shared/js/console.js"></script>
    <script>
        
    </script>
    
    
</head>
<body>
    
        <a class="offline-button" href="../index.html">Back</a>
    
    <div data-role="view" data-title="Titanic Belfast" id="scroller-view">
    <div class="titanic_a">&nbsp;</div>

    <h2>Titanic Belfast</h2>

    <div data-role="scroller" class="scroller-content">
        <p>
           The world's largest Titanic experience is opening today in Belfast, Ireland - the place where the iconic ship had been designed and built.
        </p>
        <p>
           The 14,000-sq-m structure took three years to build - the same timespan as the Titanic itself - and like the boat it omits a luxurious aeasthetic. Guests confront a shimmering facade that's made of four peaking triangular shells, resembling 27-m-high vertical ship hulls.
        </p>
        <p>
           Titanic Belfast&reg; extends over nine galleries, with multiple dimensions to the exhibition, drawing together special effects, dark rides, full-scale reconstructions and innovative interactive features to explore the Titanic story in a fresh and insightful way; from her conception in Belfast in the early 1900s, through her construction and launch, to her infamous maiden voyage and catastrophic demise. The journey goes beyond the aftermath of the sinking, to the discovery of the wreck and continues into the present day with a live undersea exploration centre. 
        </p>
    </div>

    <div class="titanic_b">&nbsp;</div>


    <div data-role="scroller" class="scroller-content">
        <p>
            'Its architectural form cuts a skyline silhouette that has been inspired by the very ships that were built on this hallowed ground,' says Eric R Kuhne of CivicArts / Eric R Kuhne & Associates, who designed the building in collaboratino with TODD Architects. 'Its design anchors the profound spirit of invention and innovation from a century ago in a new form.'
        </p>

        <p>
            Inside the six-storey museum are a 1000-seat suite, education and communication facilities, plus catering and retail space. A five-storey central atrium was inspired by the physical gap between the Titanic and Olympic when they were constructed.
        </p>
    </div>

    <div class="titanic_c">&nbsp;</div>

    <div data-role="scroller" class="scroller-content">
        <p>
            <a href="http://www.frameweb.com/news/titanic-belfast" title="www.frameweb.com">www.frameweb.com</a>
        </p>
        <p>
            Text by Lydia Parafianowicz and <a href="http://www.titanicbelfast.com" title="www.titanicbelfast.com">www.titanicbelfast.com</a>
        </p>
        <p>
            Photos courtesy Christopher Heaney.
        </p>
    </div>
</div>

<style scoped>
    .titanic_a, .titanic_b, .titanic_c {
        display: block;
        height: 230px;
        background: url(../content/mobile/shared/titanic1.jpg) no-repeat center center;
        -webkit-background-size: 100% auto;
        background-size: 100% auto;
    }

    .titanic_b {
        background: url(../content/mobile/shared/titanic2.jpg) no-repeat center center;
    }
    
    .titanic_c {
        background: url(../content/mobile/shared/titanic3.jpg) no-repeat center center;
    }

    #scroller-view h2{
        margin: 15px 10px 0 10px;
    }

    #scroller-view img {
        -webkit-transform: translatez(0);
    }

    #scroller-view .scroller-content {
        font-weight: normal;
        height: 130px;
        margin: 15px 0;
        background-color: rgba(0, 0, 0, 0.07);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45) inset;
    }
    
    .km-ios #scroller-view .km-navbar {
        background: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0, rgba(255, 255, 255, 0.5)), color-stop(0.06, rgba(255, 255, 255, 0.45)), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(1, rgba(100, 100, 100, 0))), url(../content/shared/images/patterns/pattern9.png);
        background: -moz-linear-gradient(center top , rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.45) 6%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(100, 100, 100, 0)), url(../content/shared/images/patterns/pattern9.png);
	}
	.km-tablet .km-ios #scroller-view .km-view-title {
        color: #fff;
        text-shadow: 0 -1px rgba(0,0,0,.5);
    }
    
    .km-ios #scroller-view .km-navbar .km-button {
        background-color: rgba(0,0,0,0.2);
    }
</style>



    
    <script>
        window.kendoMobileApplication = new kendo.mobile.Application(document.body);
    </script>
    
    
</body>
</html>
